<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>个人信息</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main .myform {
            width: 30%;
            margin-left: 40px;
        }

        main p {
            display: block;
            width: 100%;
            /* position: absolute;
            bottom: 20px; */
            text-align: center;
            margin: 20px 0;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <script>
        $(function (){
           initData();
        })

        /**
         * 初始化数据
         */
        function initData(){
            // 获取登录保存的用户信息
            let user = sessionStorage.getItem("user");
            console.log("-------------教师信息：",user)
            if(user){
                user = JSON.parse(user);
                $("#userId").val(user.userId)
                $("#username").val(user.username)
                $("#nickname").val(user.nickname)
                $(`input[name=gender][value=${user.gender}]`).attr("checked",true)// 绑定单选按钮
                $("#phone").val(user.phone)
                $(`#rank option[value=${user.rank}]`).attr("selected", true);// 绑定下拉框


            }
        }
    </script>
</head>

<body>
<div class="container-fluid my-container">
    <main>
        <!-- 路径导航 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">个人中心</a></li>
            <li class="active">个人信息</li>
        </ol>
        <!-- 表单 -->
        <div class="myform">
            <form id="myForm" action="/SelectCourse2/teacher/update" method="post">
                <div class="form-group">
                    <label for="userId">编<span style="color:transparent;user-select: none;">隐藏</span>号：</label>
                    <input type="hidden" class="form-control" name="userId" id="userId">
                </div>
                <div class="form-group">
                    <label for="username">工<span style="color:transparent;user-select: none;">隐藏</span>号：</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入姓名" readonly>
                </div>
                <div class="form-group">
                    <label for="nickname">姓<span style="color:transparent;user-select: none;">隐藏</span>名：</label>
                    <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="nickname">性<span style="color:transparent;user-select: none;">隐藏</span>别：</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="gender" id="optionsRadios1" value="男">
                            男
                        </label>
                        &nbsp;&nbsp;
                        <label>
                            <input type="radio" name="gender" id="optionsRadios2" value="女">
                            女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                    <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
                </div>
                <div class="form-group">
                    <label for="rank">职<span style="color:transparent;user-select: none;">隐藏</span>称：</label>
                    <select class="form-control" id="rank" readonly>
                        <option class="disabled" readonly>请选择职称</option>
                        <option value="教授">教授</option>
                        <option value="副教授">副教授</option>
                        <option value="讲师">讲师</option>
                        <option value="助教">助教</option>
                        <option value="高级工程师">高级工程师</option>
                        <option value="中级工程师">中级工程师</option>
                        <option value="初级工程师">初级工程师</option>
                        <option value="助理工程师">助理工程师</option>
                    </select>
                </div>
                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </form>

        </div>
    </main>
    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<script>
    // 提交表单的方法
    function save() {
        let that = this;
        // 非空校验
        let userId = $("#userId").val();
        let username = $("#username").val();
        let nickname = $("#nickname").val();
        let gender = $("input[name=gender]:checked").val();
        let phone = $("#phone").val();
        let rank = $("#rank option:selected").val();

        console.log(username, nickname, gender, phone, rank);
        // 进行非空校验
        if (!nickname || nickname === '') {
            bootoast({
                message: '姓名不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!gender || gender === '') {
            bootoast({
                message: '性别不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!phone || phone === '') {
            bootoast({
                message: '手机不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!rank || rank === '') {
            bootoast({
                message: '职称不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        console.log(`userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}`);
        // 提交表单
        $.ajax({
            type: 'post',// 提交方式 post
            url: $("#myForm").attr("action"),// /SelectCourse/teacher/update
            cache: false,// 不启用缓存
            data: `userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}`,
            dataType: 'json',// 期望服务器响应的数据类型 json
            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                console.log(result);
                // 改变主页右上角的登录人名称
                sessionStorage.setItem("nickname",$("#nickname").val())
                // 提示
                bootoast({
                    message: result.msg,
                    type: 'success',
                    position: 'top',
                    timeout: 2
                });
                // 更新列表
                that.queryAll(null);
                // 关闭修改模态框
                $('#exampleModal').modal('hide')
            },
            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                // 提示
                bootoast({
                    message: '服务器请求错误！',
                    type: 'danger',
                    position: 'top',
                    timeout: 2
                });
            }

        })
        return true;
    }
</script>
</body>
</html>